<template>
    <div>

        <div class="block">
            <span class="demonstration" style="margin-left: 20px;color: darkred">请选择时间区间:</span>
            <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    style="margin-left: 50px"
                    :default-time="['12:00:00']">
            </el-date-picker>
            <el-button type="primary" @click="searchDate" style="margin-left: 10px;background-color: dimgrey">搜索</el-button>
            <!--<div v-if="this.display"style="width: 100%;height: 20px;background-color: dimgrey;margin-top: 40px"></div>-->
            <div v-if="this.display" style="margin-left: 46%;font-family: 微软雅黑;font-size: 40px;color: dimgrey;margin-top: 50px"><p1>团队数据</p1></div>
         <div v-if="this.display" style="width: 100%;height: 20px;background-color: dimgrey;"></div>
            <div v-if="this.display">
                <el-table
                        :data="this.timesRes"
                        stripe
                        style="width: 100%;margin-left: 30px">
                    <el-table-column
                            prop="sumCount"
                            label="总数量"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="comCount"
                            label="已处理数量"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="unCount"
                            label="未处理数量"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="maxTime"
                            label="最长处理时间"
                            width="250">

                    </el-table-column>
                    <el-table-column
                            prop="minTime"
                            label="最短处理时间"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="avgTime"
                            label="平均处理时间"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="avgxtime"
                            label="平均响应时间"
                            width="250">
                    </el-table-column>

                </el-table>
                <!--<div style="width: 100%;height: 20px;background-color: dimgrey"></div>-->
               <!-- <el-table
                                :data="typeList"
                                style="width: 100%;margin-left: 300px">
                            <el-table-column
                                    prop="type"
                                    label="类型"
                                    width="600p">
                            </el-table-column>
                            <el-table-column
                                    prop="count"
                                    label="数量"
                                    width="600">
                            </el-table-column>
                        </el-table>-->
           <div v-if="this.display" style="width: 100%;height: 20px;background-color: dimgrey"></div>
                <div id="typeList" :style="{width: '700px', height: '300px'}"></div>
                <div v-if="this.display" style="margin-left: 46%;font-family: 微软雅黑;font-size: 40px;color: dimgrey"><p1>个人数据</p1></div>
                <div v-if="this.display" style="width: 100%;height: 20px;background-color: dimgrey"></div>
                <div id ="pie">
                    <div style="float:left;width: 30%">
                        <div id="sumCount" :style="{width: '100%', height: '300px'}"></div>
                    </div>
                    <div style="float: left;width: 30%">
                        <div id="comCount" :style="{width: '100%', height: '300px'}"></div>
                    </div>
                    <div style="float: left;width: 30%">
                        <div id="unCount" :style="{width: '100%', height: '300px'}"></div>
                    </div>



                </div>

                <div v-if="this.display" style="width: 100%;height: 20px;background-color: lightslategrey;margin-top: 20%"></div>
                <div id="avgTime" :style="{width: '700px', height: '300px'}"></div>
               <!-- <el-table
                        :data="personList"
                        height="250"
                        border
                        style="width: 100%;margin-left: 20%">
                    <el-table-column
                            prop="hrName"
                            label="查单人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="sumCount"
                            label="总数量"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="unCount"
                            label="未处理数量"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="comCount"
                            label="已处理数量"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="avgTime"
                            label="平均处理时间"
                            width="180">
                    </el-table-column>
                </el-table>-->



                <div></div>




            </div>

        </div>
    </div>
</template>

<script>

    export default {

        name: "StaAll",
        data() {
            return {
                display: false,
                Times:{
                     startTime: "",
                       endTime: ""
                },
                timesRes:  [],
                typeList: [],
                type: [],
                count:[],
                avgTime: [],
                hrName: [],
                personList: [],
                value1: "",
                sumCount: [],
                unCount: [],
                comCount: [],
                sumCache: {
                    name: "",
                    value: 0
                },
                unCache: {
                    name: "",
                    value: 0
                },
                comCache: {
                    name: "",
                    value: 0
                },
                ab: []
            };

        },
        methods: {
            drawPie(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('sumCount'))
                // 绘制图表
                myChart.setOption({
                    title: { text: '总数量',
                             left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: {
                        data: this.sumCount,
                        name: '占比',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '40%'],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                });
            },
            drawUnCount(){
                // 基于准备好的dom，初始化echarts实例
                let unChart = this.$echarts.init(document.getElementById('unCount'))
                // 绘制图表
                unChart.setOption({
                    title: { text: '未处理数量', left: 'center'},
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: {
                        type: 'pie',
                        data: this.unCount,
                        name: '占比',
                        radius: '55%',
                        center: ['50%', '40%'],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                });
            },
            drawComCount(){
                // 基于准备好的dom，初始化echarts实例
                let unChart = this.$echarts.init(document.getElementById('comCount'))
                // 绘制图表
                unChart.setOption({
                    title: { text: '已处理数量', left: 'center'},
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: {
                        type: 'pie',
                        data: this.comCount,
                        name: '占比',
                        radius: '55%',
                        center: ['50%', '40%'],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                });
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('typeList'))
                // 绘制图表
                myChart.setOption({
                    color: 'lightslategrey',
                    title: { text: '单子类型统计',
                        left: 'center'},
                    tooltip: {},
                    xAxis: {
                        data: this.type
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.count,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }]
                });
            },
            drawAvgTime(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('avgTime'))
                // 绘制图表
                myChart.setOption({
                    color: 'lightslategrey',
                    title: { text: '平均处理时间(分钟)',
                        left: 'center'},
                    tooltip: {},
                    xAxis: {
                        data: this.hrName
                    },
                    yAxis: {},
                    series: [{
                        name: '处理时间',
                        type: 'bar',
                        data: this.avgTime,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'top',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }]
                });
            },
            searchDate(){
                this.display = true;
                console.log(this.value1);
                this.count=[];
                this.type=[];
                this.typeList=[];
                this.Times.startTime = this.value1[0];
                this.Times.endTime = this.value1[1];
                console.log(this.Times);
                this.postRequest("/system/order/getTimes", this.Times).then(resp => {
                    if (resp) {
                        console.log(resp);

                        this.timesRes = resp;
                        this.typeList = resp[0].typeList;
                        for(let i=0;i<this.typeList.length;i++){
                            console.log("生活真的美好")


                                console.log(this.typeList[i])

                                this.type.push(this.typeList[i].type);
                                this.count.push(this.typeList[i].count)


                        }
                        console.log("坚持就是胜利")
                        console.log(this.type)
                        this.drawLine();

                        /*this.$set(this.timesRes[0],resp);*/
                        console.log(12324)
                        console.log(this.timesRes[0].typeList);

                    }
                });
                this.postRequest("/system/order/getPersonInfo", this.Times).then(resp => {
                    if (resp) {
                        console.log(resp);
                        this.sumCount = [];
                        this.unCount = [];
                        this.comCount = [];
                        this.avgTime = [];
                        this.hrName = [];
                        this.personList = resp;
                        console.log(this.personList);
                        for(let i=0;i<this.personList.length;i++){
                            this.sumCache.name = this.personList[i].hrName;
                            this.sumCache.value = this.personList[i].sumCount;
                            this.sumCount.push(this.sumCache);
                            this.sumCache = {name:"", value: 0}
                            this.unCache.name = this.personList[i].hrName;
                            this.unCache.value = this.personList[i].unCount;
                            this.unCount.push(this.unCache);
                            this.unCache = {name:"", value: 0}
                            this.comCache.name = this.personList[i].hrName;
                            this.comCache.value = this.personList[i].comCount;
                            this.comCount.push(this.comCache);
                            this.comCache = {name:"", value: 0}
                            var avgTime = this.personList[i].avgTime.endsWith("分钟") ?  this.personList[i].avgTime.match(/(\S*)分钟/)[1]: 0;
                            this.hrName.push(this.personList[i].hrName);
                            this.avgTime.push(avgTime)

                        }
                        this.drawPie();
                        this.drawUnCount();
                        this.drawComCount();
                        this.drawAvgTime();

                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>